<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="综合分析报告 - 生成包含主要数据分析结论的综合报告">
    <meta name="keywords" content="数据分析, 报告, 图表可视化, Chart.js">
    <meta name="author" content="数据分析团队">
    <title>综合分析报告</title>
    <style>
        :root {
            --primary-color: #1a73e8;
            --secondary-color: #34a853;
            --accent-color: #ea4335;
            --background-color: #ffffff;
            --text-color: #202124;
            --secondary-text-color: #5f6368;
        }

        body {
            font-family: 'Roboto', sans-serif;
            color: var(--text-color);
            background-color: var(--background-color);
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        h1, h2, h3 {
            color: var(--primary-color);
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        h2 {
            font-size: 2rem;
            margin-top: 2rem;
            margin-bottom: 1rem;
        }

        h3 {
            font-size: 1.5rem;
            margin-top: 1.5rem;
            margin-bottom: 0.75rem;
        }

        p {
            margin-bottom: 1rem;
        }

        a {
            color: var(--primary-color);
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        .chart-container {
            margin: 20px 0;
            position: relative;
            width: 100%;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        canvas {
            width: 100% !important;
            height: auto !important;
        }

        .print-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            cursor: pointer;
            margin: 20px 0;
        }

        .print-button:hover {
            background-color: #1967d2;
        }

        @media print {
            .print-button {
                display: none;
            }

            body {
                font-size: 12pt;
            }

            h1 {
                font-size: 18pt;
            }

            h2 {
                font-size: 16pt;
            }

            h3 {
                font-size: 14pt;
            }

            .chart-container {
                page-break-inside: avoid;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>综合分析报告</h1>
        <p><strong>生成时间</strong>: 2025-04-30 02:38:48</p>

        <h2>报告概述</h2>
        <p>生成包含主要数据分析结论的综合报告</p>

        <h2>目录</h2>
        <ol>
            <li><a href="#chapter-1">性别分布</a></li>
            <li><a href="#chapter-2">年龄分布</a></li>
            <li><a href="#chapter-3">学历层次</a></li>
            <li><a href="#chapter-4">婚姻状态</a></li>
            <li><a href="#chapter-5">工会分布</a></li>
            <li><a href="#chapter-6">小组分布</a></li>
            <li><a href="#chapter-7">机构分布</a></li>
        </ol>

        <a id='chapter-1'></a>
        <h2>1. 性别分布</h2>
        <div class="chart-container">
            <canvas id="genderChart"></canvas>
        </div>
        <h3>主要发现</h3>
        <p>根据提供的数据，会员性别分布呈现明显的性别差异，男性会员占比显著高于女性会员。具体来看，男性会员占比为61.12%，女性会员占比为38.88%。</p>

        <a id='chapter-2'></a>
        <h2>2. 年龄分布</h2>
        <div class="chart-container">
            <canvas id="ageChart"></canvas>
        </div>
        <h3>主要发现</h3>
        <p>根据提供的数据，会员的年龄分布主要集中在31-45岁区间，占比达到48.0%。其次是46-60岁和19-30岁区间，分别占比25.8%和24.4%。60岁以上的会员数量最少，仅占1.6%。</p>

        <a id='chapter-3'></a>
        <h2>3. 学历层次</h2>
        <div class="chart-container">
            <canvas id="educationChart"></canvas>
        </div>
        <h3>主要发现</h3>
        <p>通过对会员学历构成的分析，我们发现博士研究生毕业的会员占据了绝对优势，占比高达65.93%，其次为硕士研究生毕业，占比25.25%。大学本科及以下学历的会员占比较低，整体学历层次呈现出高端化趋势。</p>

        <a id='chapter-4'></a>
        <h2>4. 婚姻状态</h2>
        <div class="chart-container">
            <canvas id="maritalStatusChart"></canvas>
        </div>
        <h3>主要发现</h3>
        <p>在本次分析中，我们针对会员的婚姻状态进行了详细的数据解读。数据显示，已婚会员占比最高，达到59.2%，未婚会员占比37.8%，其他婚姻状态（包括离婚、未知、再婚、离异、初婚）合计占比3%。</p>

        <a id='chapter-5'></a>
        <h2>5. 工会分布</h2>
        <div class="chart-container">
            <canvas id="unionChart"></canvas>
        </div>
        <h3>主要发现</h3>
        <p>根据数据分析，电子与信息工程学院分工会的会员数量最多，达到34人，而水文与水资源工程学院分工会的会员数量最少，仅为5人。整体来看，工会会员数量呈现明显的分布不均现象。</p>

        <a id='chapter-6'></a>
        <h2>6. 小组分布</h2>
        <div class="chart-container">
            <canvas id="groupChart"></canvas>
        </div>
        <h3>主要发现</h3>
        <p>通过对会员所在小组的分布情况进行分析，我们发现会员主要集中在“未知”小组，占比最高，其次是“两办行政”和“自动化系”。整体来看，小组分布呈现明显的长尾效应，少数小组集中了大部分会员，而多数小组的会员数量较少。</p>

        <a id='chapter-7'></a>
        <h2>7. 机构分布</h2>
        <div class="chart-container">
            <canvas id="institutionChart"></canvas>
        </div>
        <h3>主要发现</h3>
        <p>会员所在机构分布显示，计算机学院、自动化学院和文学院会员数量最多，分别为28、27和23人。其他机构会员数量逐渐减少，部分机构如科技产业处、研究生院等仅有1名会员。</p>

        <button class="print-button" onclick="window.print()">导出为PDF</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Gender Distribution Chart
        const genderCtx = document.getElementById('genderChart').getContext('2d');
        const genderChart = new Chart(genderCtx, {
            type: 'pie',
            data: {
                labels: ['男性会员', '女性会员'],
                datasets: [{
                    label: '性别分布',
                    data: [61.12, 38.88],
                    backgroundColor: ['#1a73e8', '#34a853'],
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: '性别分布'
                    }
                }
            }
        });

        // Age Distribution Chart
        const ageCtx = document.getElementById('ageChart').getContext('2d');
        const ageChart = new Chart(ageCtx, {
            type: 'bar',
            data: {
                labels: ['19-30岁', '31-45岁', '46-60岁', '60岁以上'],
                datasets: [{
                    label: '年龄分布',
                    data: [24.4, 48.0, 25.8, 1.6],
                    backgroundColor: '#1a73e8',
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: '年龄分布'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // Education Level Chart
        const educationCtx = document.getElementById('educationChart').getContext('2d');
        const educationChart = new Chart(educationCtx, {
            type: 'doughnut',
            data: {
                labels: ['博士研究生毕业', '硕士研究生毕业', '大学本科及以下'],
                datasets: [{
                    label: '学历层次',
                    data: [65.93, 25.25, 8.82],
                    backgroundColor: ['#1a73e8', '#34a853', '#ea4335'],
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: '学历层次'
                    }
                }
            }
        });

        // Marital Status Chart
        const maritalStatusCtx = document.getElementById('maritalStatusChart').getContext('2d');
        const maritalStatusChart = new Chart(maritalStatusCtx, {
            type: 'pie',
            data: {
                labels: ['已婚', '未婚', '其他'],
                datasets: [{
                    label: '婚姻状态',
                    data: [59.2, 37.8, 3],
                    backgroundColor: ['#1a73e8', '#34a853', '#ea4335'],
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: '婚姻状态'
                    }
                }
            }
        });

        // Union Distribution Chart
        const unionCtx = document.getElementById('unionChart').getContext('2d');
        const unionChart = new Chart(unionCtx, {
            type: 'bar',
            data: {
                labels: ['电子与信息工程学院分工会', '人工智能学院分工会', '大气科学学院分工会', '其他'],
                datasets: [{
                    label: '工会分布',
                    data: [34, 28, 28, 5],
                    backgroundColor: '#1a73e8',
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: '工会分布'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // Group Distribution Chart
        const groupCtx = document.getElementById('groupChart').getContext('2d');
        const groupChart = new Chart(groupCtx, {
            type: 'bar',
            data: {
                labels: ['未知', '两办行政', '自动化系', '其他'],
                datasets: [{
                    label: '小组分布',
                    data: [53, 41, 13, 10],
                    backgroundColor: '#1a73e8',
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: '小组分布'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // Institution Distribution Chart
        const institutionCtx = document.getElementById('institutionChart').getContext('2d');
        const institutionChart = new Chart(institutionCtx, {
            type: 'bar',
            data: {
                labels: ['计算机学院', '自动化学院', '文学院', '其他'],
                datasets: [{
                    label: '机构分布',
                    data: [28, 27, 23, 1],
                    backgroundColor: '#1a73e8',
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: '机构分布'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
</body>
</html>
